<template>
	<view style="height: 100%">
		<!-- orderSub/pages/useCouponYxhk/useCoupon.wxml -->
		<view v-if="couponList.length > 0">
			<view class="tip1">
				单笔订单可使用
				<text>1张</text>
				券
			</view>
			<view class="demo">
				<view class="couponBox" v-for="(item, index) in couponList" :key="index">
					<image v-if="item.notApplyStatus == 1"
						src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/orderSub/images/line_bg.png" class="img">
					</image>

					<image v-else
						src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/orderSub/images/historyCardVoucher.png"
						class="img"></image>

					<view class="info">
						<view class="left">
							<view class="money">
								<span v-if="item.couponTypeStr!='折扣券'">￥</span>
								<text>{{ item.couponAmount }}</text>
								<span v-if="item.couponTypeStr=='折扣券'">折</span>
							</view>
							<view class="useType">{{ item.applyStationType == 1 ? '全场' : '指定' }}</view>
						</view>
						<view class="right">
							<view :class="item.status > 1 ? 'txt1_no' : 'txt1'">
								<view>{{ item.couponTypeStr }}</view>
								<!-- <view v-if="item.type == 1">服务费券</view>
                                <view v-if="item.type == 2">电费券</view>
                                <view v-if="item.type == 3">现金券</view> -->
								<image @tap="parseEventDynamicCode($event, item.notApplyStatus > 1 ? '' : 'checkCoupon')"
									:data-id="item.id" :src="
                                        item.notApplyStatus > 1
                                            ? 'http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/orderSub/images/checkbox_disable.png'
                                            : item.status == 3
                                            ? 'http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/orderSub/images/checkbox.png'
                                            : 'http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/orderSub/images/checkbox_sel.png'
                                    "></image>
							</view>
							<view :class="item.status > 1 ? 'txt2_no' : 'txt2'">满{{ item.meetAmount }}可用</view>
							<view class="txt3">
								<image style="width: 18rpx; height: 18rpx"
									src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/orderSub/images/icon1.png"></image>
								{{ item.receiveTime }}
								<!-- {{ item.startDate }} -->
							</view>
							<view class="txt3">
								<image style="width: 18rpx; height: 18rpx"
									src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/orderSub/images/icon2.png"></image>
								{{ item.expireTime }}
							</view>
						</view>
					</view>

					<view class="statusDesc" v-if="item.notApplyStatus == 2">
						<image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/orderSub/images/tip1.png" class="img">
						</image>
						<view class="desc">
							<text>不可用原因：</text>
							{{ item.notApplyCause }}
						</view>
					</view>
				</view>
			</view>
			<view class="fotBtn">
				<view class="tip2">
					已选
					<text class="txt1">{{ num }}张</text>
					<block v-for="(item, index) in couponList" :key="index">
						<text class="txt2" v-if="item.couponTypeStr != '折扣券'&&item.status == 0">
							，可减￥{{ deductionAmount }}</text>
						<text class="txt3"
							v-if="item.status == 0">（{{ item.type == 1 ? '服务费' : item.type == 2 ? '电费' : item.type == 3 ? '现金':'' }}
							<span v-if="item.couponTypeStr != '折扣券'">￥{{ item.couponAmount }}</span>
							{{ item.couponTypeStr == '折扣券' ? '可折扣' + item.couponAmount+'折' : '' }}）</text>
					</block>
				</view>
				<view class="btn" @tap="enterCoupon">确定</view>
			</view>
		</view>
		<view v-else>
			<upgrading text="暂无卡"></upgrading>
		</view>
	</view>
</template>

<script>
	'use strict';
	// import zpMixins from '@/uni_modules/zp-mixins/index';
	import upgrading from '../../../components/upgrading/upgrading.vue';
	// orderSub/pages/useCouponYxhk/useCoupon.ts
	import {
		powerOtherCouponSelectionList
	} from '@/api/marketing/coupon.js';

	export default {
		components: {
			upgrading
		},
		data() {
			return {
				busBalance: 0,
				powerBalance: 0,
				serviceBalance: 0,
				stationId: '',
				billId: 0,
				couponList: [],
				cIdStr: '',
				serviceFee: 0,
				num: '',
				deductionAmount: '',
				couponIdStr: '',
				couponType: '',
				cashCouponType: '',
				deductibleBalanceCoupon: '',
				ifUserSel: false
			};
		},
		onLoad(options) {
			if (options.busBalance) {
				this.setData({
					busBalance: options.busBalance
				});
			}
			if (options.powerBalance) {
				this.setData({
					powerBalance: options.powerBalance
				});
			}
			if (options.serviceBalance) {
				this.setData({
					serviceBalance: options.serviceBalance
				});
			}
			if (options.stationId) {
				this.setData({
					stationId: options.stationId
				});
			}
			if (options.billId) {
				this.setData({
					billId: options.billId
				});
			}
			if (options.couponIdStr) {
				this.setData({
					cIdStr: options.couponIdStr
				});
			}
			if (options.serviceFee) {
				this.setData({
					serviceFee: parseFloat(options.serviceFee)
				});
			}
			this.powerOtherCouponSelectionList();
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {},
		methods: {
			powerOtherCouponSelectionList() {
				let settlementCouponVo = {
					busBalance: this.busBalance,
					powerBalance: this.powerBalance,
					serviceBalance: this.serviceBalance,
					stationId: this.stationId,
				}
				console.log('打印入参', settlementCouponVo)
				powerOtherCouponSelectionList(settlementCouponVo, this.stationId).then((res) => {
					if (res.code == 200) {
						let data = (res && res.data) || []
						let filterData1 = data.filter(i => i.notApplyStatus === 1)
						let filterData2 = data.filter(i => i.notApplyStatus === 2)
						this.getCouponList([...filterData1, ...filterData2])
					}
				});
			},
			getCouponList(data) {
				let couponList = data;
				let cIdStr = this.cIdStr;
				let num = 0;
				let deductionAmount = 0;
				couponList.forEach((item) => {
					if (item.notApplyStatus == 2) {
						item.status = 10;
					} else {
						if (cIdStr == item.id) {
							item.status = 0;
						} else {
							if (cIdStr) {
								if (item.status == 0) {
									item.status = 1;
								} else {
									item.status = item.status;
								}
							}
						}
						if (item.status == 0) {
							deductionAmount += item.couponAmount;
							num++;
						}
					}
				});
				this.setData({
					couponList,
					num: num,
					deductionAmount: deductionAmount
				});
			},

			//选择优惠券
			checkCoupon(e) {
				const id = e.currentTarget.dataset.id;
				let list = this.couponList;
				list.forEach((item) => {
					let count = 0;
					if (item.id == id) {
						item.status = 0;
						// if (item.status == 0) {
						//     item.status = 1;
						// } else {
						//     item.status = 0;
						// }
						// list.forEach((e) => {
						//     if (e.status == 0) {
						//         count++;
						//     }
						// });
						// if (count == 2) {
						//     item.status = 1;
						//     uni.showModal({
						//         title: '信息提示',
						//         content: '只可使用一张',
						//         showCancel: false
						//     });
						// }
					} else {
						if (item.status <= 1) {
							item.status = 3;
						}
					}
				});
				let num = 0;
				let deductionAmount = 0;
				list.forEach((element) => {
					if (element.status == 0) {
						deductionAmount += element.couponAmount;
						num++;
					}
				});
				this.setData({
					couponList: list,
					num: num,
					deductionAmount: deductionAmount
				});
			},

			//确定使用优惠券
			enterCoupon() {
				let couponIdStr = '';
				let couponAmount = 0;
				let couponType = '';
				let cashCouponType = '';
				let list = this.couponList;
				let isCheck = false;
				list.forEach((item) => {
					if (item.status == 0) {
						couponIdStr = item.id;
						couponAmount = item.couponAmount;
						couponType = item.type;
						if (Number(couponType) == 3) {
							cashCouponType = item.cashCouponType;
						}
						isCheck = true;
					}
				});
				// let pages = getCurrentPages(); //当前页面
				// let prevPage = pages[pages.length - 2]; //上一页面
				// prevPage.couponIdStr = couponIdStr,
				// prevPage.ifUserSel=true
				// if (!isCheck) {
				//     wx.showModal({
				//         title: '信息提示',
				//         content: '请选择优惠券',
				//         showCancel: false
				//     })
				//     return false;
				// }



				let pages = getCurrentPages(); //当前页面
				let prevPage = pages[pages.length - 2]; //上一页面
				// prevPage.couponIdStr = couponIdStr,
				// prevPage.couponType = couponType,
				// prevPage.cashCouponType = cashCouponType,
				// prevPage.money = couponAmount.toFixed(2),
				// prevPage.ifUserSel = true,
				prevPage.setData({
					//直接给上一个页面赋值
					couponIdStr,
					couponType,
					cashCouponType,
					money: couponAmount.toFixed(2),
					ifUserSel: true
				});
				uni.navigateBack({
					delta: 1
				});
			}
		}
	};
</script>
<style>
	/* orderSub/pages/useCouponYxhk/useCoupon.wxss */
	/*数字*/
	/*固定布局*/
	/*宽高*/
	/* 行高 */
	/* 外边距 */
	/* 实边框 */
	/* 定位  */
	.record-in .aaa1 {
		color: #909399;
	}

	.record-in .aaa2 {
		color: #1487fa;
	}

	.record-in .aaa3 {
		color: #f7a14a;
	}

	.record-in .aaa4 {
		color: #72c23d;
	}

	.record-in .aaa5 {
		color: #606266;
	}

	page {
		background-color: #f5f7fa;
	}

	.tip1 {
		text-align: center;
		font-size: 28rpx;
		margin: 39rpx 0 36rpx 0;
		font-family: PingFang SC;
		font-weight: 500;
		color: #606266;
	}

	.tip1 text {
		color: #fc724c;
		font-size: 30rpx;
	}

	.demo {
		padding-bottom: 240rpx;
	}

	.couponBox {
		margin: 0 12rpx 0rpx 12rpx;
	}

	.couponBox .img {
		width: 726rpx;
		height: 220rpx;
	}

	.couponBox .info {
		position: absolute;
		display: flex;
	}

	.couponBox .info .left {
		width: 230rpx;
		text-align: center;
		margin-left: 10rpx;
		margin-top: -196rpx;
	}

	.couponBox .info .left .money {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #fff;
	}

	.couponBox .info .left .money text {
		font-size: 72rpx;
	}

	.couponBox .info .left .useType {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
	}

	.couponBox .info .right {
		margin-left: 50rpx;
		margin-top: -200rpx;
	}

	.couponBox .info .right .txt1 {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #1a1a1a;
		display: flex;
		align-items: center;
	}

	.couponBox .info .right .txt1 image {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		right: -60rpx;
	}

	.couponBox .info .right .txt1_no {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		display: flex;
		align-items: center;
		color: #606266;
	}

	.couponBox .info .right .txt1_no image {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		right: -60rpx;
	}

	.couponBox .info .right .txt2 {
		font-size: 26rpx;
		margin: 18rpx 0 10rpx 0;
		font-family: PingFang SC;
		font-weight: 500;
		color: #303133;
	}

	.couponBox .info .right .txt2_no {
		font-size: 26rpx;
		margin: 18rpx 0 12rpx 0;
		font-family: PingFang SC;
		font-weight: 500;
		color: #606266;
	}

	.couponBox .info .right .txt3 {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #606266;
		width: 342rpx;
	}

	.couponBox .statusDesc {
		display: flex;
		margin-bottom: 16rpx;
	}

	.couponBox .statusDesc .img {
		width: 32rpx;
		height: 32rpx;
		margin: 0 10rpx 0 12rpx;
	}

	.couponBox .statusDesc .desc {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #303133;
	}

	.couponBox .statusDesc .desc text {
		color: #fc724c;
	}

	.fotBtn {
		position: fixed;
		bottom: 0;
		background-color: #f5f7fa;
		height: 137rpx;
		padding: 20rpx 35rpx 53rpx 35rpx;
	}

	.fotBtn .tip2 {
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #303133;
	}

	.fotBtn .tip2 .txt1 {
		color: #1487fa;
	}

	.fotBtn .tip2 .txt2 {
		font-size: 30rpx;
		font-family: DIN-Bold;
		font-weight: Bold;
		color: orange;
	}

	.fotBtn .tip2 txt3 {
		color: #606266;
	}

	.fotBtn .btn {
		width: 680rpx;
		line-height: 88rpx;
		margin-top: 24rpx;
		text-align: center;
		background: linear-gradient(105deg, #2b99ff, #1b8cf5);
		box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
		border-radius: 44rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #fff;
	}
</style>